<template>
    <div  class='order_box'>
        <van-nav-bar
          title="我的订单"
          left-arrow
          @click-left="onClickLeft"
        />
        <van-tabs v-model="active" animated swipeable @change='changeTab'>
          <van-tab v-for="(item) in orderList" :title="item.name" :key="item.name">
            <router-link 
              :to="{name:'goodsInfo',params:{id:val.id}}" 
              v-for='val in item.list'
              :key='val.id'>
              <van-card
                :num="val.count"
                :price="val.info.price|money"
                :desc="val.info.detail.text"
                :title="val.info.title"
                :thumb="val.info.pic"
                
              >
                <!-- <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template> -->
                <template #footer>
                  <span>总价是：{{val.count*val.info.price|money}}</span>
                  <van-button size="mini">按钮</van-button>
                </template>
              </van-card>
            </router-link>
            <van-empty v-if='!item.list.length' description="没有对应的订单呦" />
          </van-tab>
        </van-tabs>
    </div>
</template>
<script>
// @ is an alias to /src
import {getOrderList} from '@/api/api'
export default {
    name: 'orderPage',
    data() {
        return {
          active:2,
          orderList:[
            {
              name:"全部订单",
              list:[]
            },
            {
              name:"待付款",
              list:[]
            },
            {
              name:"待收货",
              list:[]
            },
            {
              name:"待评价",
              list:[]
            },
            {
              name:"退款订单",
              list:[]
            }
          ]
        }
    },
    created() {
      this.getOrderList()
    },
    methods: {
      changeTab(){
        console.log(arguments)
        this.getOrderList()
      },
      getOrderList(){
        getOrderList(this.active).then(data=>{
          // console.log(data)
          // data = Object.freeze(data)
          this.orderList[this.active].list = Object.freeze(data.data || [])
        })
      },
      onClickLeft(){
        this.$router.back()
      }
    },
    components: {
        
    }
}
</script>
<style lang="less">
  .order_box{
    text-align: left;
    .van-nav-bar .van-icon {
        color: #333;
    }
  }
</style>